<h2>avalon自带加载器</h2>
<div ms-include-src="{{userLanguage}}/engineering/loader.menu.html" data-include-replace="true">
    
</div>
<p>一般而言， 我们只在页面上引入一个JS文件，不用说那个JS文件就是avalon.js。然后在对应的script标签上定义一个data-main属性，
    值为一个入口文件的路径。<strong style="color:red">注意，它不能使用.js扩展名</strong>。</p>
<pre class="brush:html;gutter:false;toolbar:false;">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;avalon.js&lt;/title&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width"&gt;
        &lt;script src="avalon.js" data-main="js/main"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div&gt;TODO write content&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</pre>
<p>比如上面的入口文件应为js/main.js，它是放在avalon.js所在目录的js子目录下。</p>
<p>入口文件主要做两件事，使用require.config进行配置，使用require加载你的业务代码。</p>
<p><strong>main.js</strong></p>
<pre class="brush:javascript;gutter:false;toolbar:false">
require.config({
    baseUrl: "js", 
    paths: {
        jquery: 'js/jQuery/jquery-1.12' //jQuery目录是放置各种jQuery的版本及其插件的
    }
})
//html与js与style是位于同一目录，
//js是放置JS模块及组件，
//html是放置同名模块对应的模板，
//style是放置同名模块对应的样式
//当然这只是其中一种组织形式
require(["./aaa", "text!../html/aaa.html", "css!../style/aaa","jquery"], function(a, b, c, d) {
    //.....
})
</pre>
<p>最后是各个JS模块，以define方法进行定义了。注意，define方法有三个参数，第一个参数是模块ID，通常不用写， 在打包时，r.js会根据它与baseUrl的位置
    算出其可用的模块ID名。第二个参数是依赖列表，./, ../应该是相对于其父模块进行设置。第三个是fatory函数，亦即模块本身。
</p>
<p>总结一下，加载器的三个核心API的定义与使用顺序为 require.config --> require --> define。</p>